<template>
	<view class="fx">
		<view class="grade-class">
			<view class="show-name">
				<view style="margin-right: 10rpx;">
					{{name}}
				</view>
			</view>
		</view>
		<view class="main-box">
			<view class="white-box">
				<!-- 综合分析 -->
				<view class="class-course num-box" v-if="type == 'all'">
					<view class="average">
						<view class="red-num">{{info.result ? info.result : '-'}} <text
								class="red-desc">分</text></view>
						<view class="desc">超过{{info.exceedPercent}}%的学生</view>
					</view>
					<view class="num-box-item no-border"
						v-for="item in  info.poorCourseList"
						:key="item.courseId">
						<view class="num">{{item.courseName}}</view>
						<view class="desc">薄弱学科</view>
					</view>
					<view class="num-box-item no-border"
						v-for="item in  info.goodCourseList"
						:key="item.courseId">
						<view class="num">{{item.courseName}}</view>
						<view class="desc">擅长学科</view>
					</view>
				</view>
				<!-- 单科分析 -->
				<view class="class-course-box " v-if="type == 'single'">
					<view class="course-name">
						<view class="name">{{courseName}}</view>
						<view class="desc">超过{{info.exceedPercent}}%的学生</view>
					</view>
					<view class="red-num">{{info.result}} <text
							class="red-desc">分</text></view>
				</view>
			</view>

			<!-- 班级综合分析 -->
			<view v-show="type == 'all'">
				<view class="white-box">
					<view style="display: flex;ustify-content: flex-start;">

						<view class="analysis-title" @click="showType = true"
							style="margin-right: 16rpx;">
							{{dataType}}
						</view>
						<u-icon name="arrow-down" size="10"> </u-icon>
					</view>
					<view class="chart">
						<view class="charts-box">
                            <!-- opts1{{ JSON.stringify(opts1) }} -->
                            
							<qiun-data-charts type="radar" :opts="opts1"
                                canvasId="canvasline001" :canvas2d="true"
								:chartData="chartData1" />
						</view>
					</view>
					<view class="num-list">
						<view class="gray-title">
							<view class="gray-title-item w-90">科目</view>
							<view class="gray-title-item w-85">得分</view>
							<view class="gray-title-item w-85" v-if="userInfo.userType!=='P'">
								{{dataType == '成绩' ? '班级平均' : '班级排名'}}
							</view>
							<view class="gray-title-item w-85" v-if="userInfo.userType!=='P'">
								{{dataType == '成绩' ? '年级平均' : '年级排名'}}
							</view>
						</view>
						<view class="rank-list">
							<view class="rank-list-item"
								v-for="(item, index) in info.resultList"
								:key="item.courseName">

								<view
									:class="['text-center rank-list-item-info']">
									{{item.courseName}}
								</view>
								<view
									:class="['text-center rank-list-item-info']">
									{{item.result ? item.result : '-'}}
								</view>
								<view
								 v-if="userInfo.userType!=='P'"
									:class="['text-center w-85 rank-list-item-info']">
									{{dataType == '成绩' ? item.classAverageScore :  item.classRank}}
								</view>
								<view
								 v-if="userInfo.userType!=='P'"
									:class="['text-center w-85 rank-list-item-info']">
									{{dataType == '成绩' ? item.gradeAverageScore :  item.gradeRank}}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="white-box">
					<view class="analysis-title">
						考试备注
					</view>
					<view class="gray-box">
						{{info.examRemark ?  info.examRemark : '暂无备注~~'}}
					</view>
				</view>
			</view>
			<!-- 班级单科分析 -->
			<view v-show="type == 'single'">
				<view class="white-box">
					<view class="action-title">
						<view style="display: flex;ustify-content: flex-start;">
							<view class="analysis-title"
								@click="showType = true"
								style="margin-right: 16rpx;">
								{{dataType}}
							</view>
							<u-icon name="arrow-down" size="10"> </u-icon>
						</view>
						
            <div class="right">
							
							<view class="tabC">
							<view :class="tab===activeTab?  'tab-item active' : 'tab-item'" @click="tabChange" :data-tab="tab" :key="tab" v-for="(tab,index) in tabList">
								{{tab}}
							</view>
						</view>
						<view class="check-box">
							<u-checkbox-group v-model="sameType" placement="row"
								@change="checkboxChange">
								<u-checkbox label="只看同类型考试" name="same">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						</div>
						
					</view>
					<view class="charts-box">
						<qiun-data-charts type="line" :opts="opts1"
                            canvasId="canvasline001" :canvas2d="true"
							:chartData="chartData1" />
					</view>
					<view class="num-list">
						<view class="gray-title">
							<!-- 							<view
								:class="['gray-title-item', dataType == '成绩' ? 'w-58' : 'w-42']">
								序号</view> -->
							<view
								:class="['gray-title-item',  ]">
								考试名称</view>
							<view
								:class="['gray-title-item', ]">
								成绩</view>
							<view
							v-if="dataType == '成绩'&&userInfo.userType!=='P'"
								:class="['gray-title-item',  'w-80']">
								班级平均</view>
							<view
							v-if="dataType == '成绩'&&userInfo.userType!=='P'"
								:class="['gray-title-item',  'w-80']">
								年级平均</view>
							<view class="gray-title-item w-80"
								v-if="dataType != '成绩'">班级排名</view>
							<view class="gray-title-item w-80"
								v-if="dataType != '成绩'">年级排名</view>
						</view>
						<view class="rank-list">
							<view class="rank-list-item"
								v-for="(item, index) in info.examList"
								:key="item.name">
								<!-- 								<view
									:class="['text-center rank-list-item-info', dataType == '成绩' ? 'w-58' : 'w-42']">
									{{index + 1}}
								</view> -->
								<view
									:class="['text-center rank-list-item-info' ]">
									{{item.examName}}
								</view>
								<view
									:class="['text-center rank-list-item-info' ]">
									{{item.result}}
								</view>
								<view
									:class="['text-center w-80 rank-list-item-info']"
									v-if="dataType == '成绩'&&userInfo.userType!=='P'">
									{{item.classAverageScore}}
								</view>
								<view
									:class="['text-center w-80 rank-list-item-info']"
									v-if="dataType == '成绩'&&userInfo.userType!=='P'">
									{{item.gradeAverageScore}}
								</view>
								<view
									:class="['text-center w-80 rank-list-item-info']"
									v-if="dataType != '成绩'">
									{{item.classRank}}
								</view>
								<view
									:class="['text-center w-80 rank-list-item-info']"
									v-if="dataType != '成绩'">
									{{item.gradeRank}}
								</view>
							</view>
						</view>
					</view>
				</view>



				<view class="white-box">
					<view class="analysis-title">
						成绩/科目备注
					</view>

					<view style="padding-top: 24rpx;"
						v-if="info.resultRemark || info.classCourseRemark || info.gradeCourseRemark">
						<view class="gray-box" v-show="info.resultRemark">
							<view class="info-box-title">
								<view class="info-title-icon result"></view>
								成绩备注
							</view>
							{{info.resultRemark}}
						</view>
						<view class="gray-box" v-show="info.classCourseRemark">
							<view class="info-box-title">
								<view class="info-title-icon course"></view>
								班级科目备注
							</view>
							{{info.classCourseRemark}}
						</view>

						<view class="gray-box" v-show="info.gradeCourseRemark">
							<view class="info-box-title">
								<view class="info-title-icon course"></view>
								年级科目备注
							</view>
							{{info.gradeCourseRemark}}
						</view>
					</view>
					<view class="no-remark"
						v-if="!info.resultRemark && !info.classCourseRemark && !info.gradeCourseRemark">
						<view class="empty-icon"></view>
						<view class="empty-text ">暂无备注~~</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 选择类型 -->
		<u-picker :show="showType" :columns="[['成绩', '排名']]"
			@confirm="typeConfirm" @cancel="showType = false">
		</u-picker>

	</view>
</template>

<script>
	import {
		analysisAll, //成绩分析-整体分析
		analysisSingle, //成绩分析-单科分析-整体分析
	} from "@/pages/achievement/api/student.js"
import { mapState } from "vuex";

	import {
		studentNums, // 折线图
		radarOpts, // 雷达图配置
	} from "@/pages/achievement/static/js/chartOpts.js"

	import deepClone from '@/util/deepClone.js'

	export default {
		data() {
			return {
				activeTab:"个人",
				tabList:["个人","班级","年级"],
				name: '',
				type: 'all',
				examStudentId: '',
				courseName: '',
				studentResultId: '',
				info: {
					examList: [],
					resultList: [],
				},
				showType: false,
				dataType: '成绩',
				sameType: '',
				opts1: {},
				chartData1: {},
			}
		},
		computed:{
        ...mapState(["userInfo"]),
		},
		onLoad(options) {
			this.name = options.name
			this.type = options.type
			if (options.type == 'all') {
				this.examStudentId = options.examStudentId
			} else {
				this.studentResultId = options.studentResultId
				this.courseName = options.courseName
			}
			this.getInfo()
 
		},
		methods: {
			tabChange(e){
				this.activeTab=e.currentTarget.dataset.tab
				this.getInfo()

			},
			checkboxChange(n) {
				this.sameType = n[0]
				this.getInfo()
			},
			typeConfirm(data) {
				this.dataType = data.value[0]
				if (this.type == 'single') {
					this.formatData(this.info.examList)
				} else {
					this.formatData(this.info.resultList)
				}
				this.showType = false
			},
			async getInfo() {
				let data = {}
				if (this.type == 'all') {
					//  年级综合分析
					const postData = {
						examStudentId: this.examStudentId,
					}
					const resp = await analysisAll(postData)
					data = resp.data
					this.opts1 = deepClone(radarOpts)
					this.formatData(data.resultList)
				} else if (this.type == 'single') {
					//  班级综合分析
					const postData = {
						studentResultId: this.studentResultId,
						sameType: this.sameType == 'same'
					}
					const resp = await analysisSingle(postData)

					data = resp.data
					this.opts1 = deepClone(studentNums)
					this.formatData(data.examList)
				}
				this.info = { ...this.info, ...data }
			},
			formatData(data) {
				if (this.dataType == '成绩') {
					this.tabList=["个人","班级","年级"]
					if (this.type == 'single') {
						if(this.activeTab==="个人"){
								this.chartData1 = {
							categories: data.map(item =>
								item.examName),
							series: [{

								name: "学生成绩",
								data: data.map(
									item => {
										return{
											value:item.result,
											
										} })
							}  ]
						}

						}else if(this.activeTab==="班级"){

						   	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [{
									name: "班级平均",
									// textColor: '#4275FD',
									data: data.map(
										item =>{
											return {
											value:item.classAverageScore,
											
											}
										})
								}  ]
						}

               
						

						}else if(this.activeTab==="年级"){

							 	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [ {

								name: "年级平均",
								// textColor: '#4275FD',
								data: data.map(
									item => {
									 return	{value: item.gradeAverageScore,
									 
									 }
							})
							} ]
						}

						}
						// this.chartData1 = {
						// 	categories: data.map(item =>
						// 		item.examName),
						// 	series: [{

						// 		name: "学生成绩",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item => {
						// 				return{
						// 					value:item.result,
											
						// 				} })
						// 	}, {
               
						// 		name: "班级平均",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item =>{
						// 				return {
						// 				value:item.classAverageScore,
										
						// 				}
						// 			})
						// 	}, {

						// 		name: "年级平均",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item => {
						// 			 return	{value: item.gradeAverageScore,
									 
						// 			 }
						// 	})
						// 	}]
						// }
					} else {
						if(this.activeTab==="个人"){
								this.chartData1 = {
							categories: data.map(item =>
								item.courseName),
							series: [{

								name: "学生成绩",
								data: data.map(
									item => {
										return{
											value:item.result,
											
										} })
							}  ]
						}

						}else if(this.activeTab==="班级"){
						   	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [{
									name: "班级平均",
									// textColor: '#4275FD',
									data: data.map(
										item =>{
											return {
											value:item.classAverageScore,
											
											}
										})
								}  ]
						}

               
						

						}else if(this.activeTab==="年级"){
							 	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [ {

								name: "年级平均",
								// textColor: '#4275FD',
								data: data.map(
									item => {
									 return	{value: item.gradeAverageScore,
									 
									 }
							})
							} ]
						}

						}
						// this.chartData1 = {
						// 	categories: data.map(item =>
						// 		item.courseName),
						// 	series: [{

						// 		name: "学生成绩",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item => {
						// 				return{
						// 					value:item.result,
											
						// 				} })
						// 	}, {

						// 		name: "班级平均",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item => {
						// 				return {
						// 				value:item.classAverageScore,
										
						// 				}
						// 			})
						// 	}, {

						// 		name: "年级平均",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item =>{
						// 			 return	{value: item.gradeAverageScore,
									 
						// 			 }
						// 	})
						// 	}]
						// }
					}
				} else {
					this.tabList=["班级","年级"]
					if(this.activeTab==="个人"){
						this.activeTab="班级"
					}
					

					if (this.type == 'single') {
					  if(this.activeTab==="班级"){
						   	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [{
									name: "班级排名",
									// textColor: '#4275FD',
									data: data.map(
										item =>{
											return {
											value:item.classRank,
											
											}
										})
								}  ]
						}
						
						}else if(this.activeTab==="年级"){
							 	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [ {

								name: "年级排名",
								// textColor: '#4275FD',
								data: data.map(
									item => {
									 return	{value: item.gradeRank,
									 
									 }
							})
							} ]
						}

						}
						
						// this.chartData1 = {
						// 	categories: data.map(item =>
						// 		item.examName),
						// 	series: [{
						// 		name: "班级排名",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item =>{
						// 				return {
						// 					value:item.classRank,
									 

						// 				}
						// 			} 
						// 			)
						// 	}, {
						// 		name: "年级排名",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item =>{
						// 				return{
						// 					value:item.gradeRank,
										  


						// 				}
						// 			} )
						// 	}]
						// }
					} else {
						 if(this.activeTab==="班级"){
						   	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [{
									name: "班级排名",
									// textColor: '#4275FD',
									data: data.map(
										item =>{
											return {
											value:item.classRank,
											
											}
										})
								}  ]
						}
						
						}else if(this.activeTab==="年级"){
							 	this.chartData1 = {
							categories: data.map(item =>
								item.examName),
								series: [ {

								name: "年级排名",
								// textColor: '#4275FD',
								data: data.map(
									item => {
									 return	{value: item.gradeRank,
									 
									 }
							})
							} ]
						}

						}
						// this.chartData1 = {
						// 	categories: data.map(item =>
						// 		item.courseName),
						// 	series: [{

						// 		name: "班级排名",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item =>{
						// 				return{
						// 				value:item.classRank,
										  

						// 			}} )
						// 	}, {

						// 		name: "年级排名",
						// 		// textColor: '#4275FD',
						// 		data: data.map(
						// 			item =>{
						// 				return {
						// 					value:item.gradeRank,
										  

						// 				}
						// 			} )
						// 	}]
						// }
					}
				}
				if(this.userInfo.userType==='P'){
					this.tabList=["个人" ]


				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.fx {
		height: 100vh;
		background-color: #4174FD;
		// overflow: hidden;

		.scroll {

			.gray-title,
			.rank-list {
				width: auto;
			}

			.gray-title {
				background: #fff;
				display: flex;
				justify-content: flex-start;

			}

			.scroll-item,
			.scroll-title-item {
				width: 230rpx;
			}

			.scroll-title-item {
				background: rgba(65, 116, 253, 0.08);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.grade-class {
			box-sizing: border-box;
			height: 88rpx;

			.show-name {
				height: 88rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #ffffff;
				display: flex;
				justify-content: center;
				align-items: center;
			}

		}

		.main-box {
			height: calc(100% - 120rpx - 88rpx);
			overflow-y: scroll;
			box-sizing: border-box;
			padding: 20rpx 30rpx 80rpx 30rpx;
		}

		.top-tab {
			width: 100%;
			height: 88rpx;
			overflow-x: scroll;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			margin-bottom: 20rpx;


			.tab-item {
				position: relative;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
				color: #999;
				padding: 0 24rpx;

				&.active {
					color: #4174FD;
					font-weight: 600;

					&::after {
						display: block;
						content: ' ';
						box-sizing: border-box;
						width: 30rpx;
						height: 6rpx;
						background: #4275fd;
						border-radius: 4rpx;
						position: absolute;
						bottom: 8rpx;
						left: calc(50% - 15rpx);
					}
				}

			}
		}

		.analysis-title {
			position: relative;
			z-index: 3;
			display: inline-block;
			height: 42rpx;
			line-height: 42rpx;
			font-size: 30rpx;
			font-weight: 600;
			padding-left: 16rpx;

			&::before {
				position: absolute;
				left: 0;
				top: calc(50% - 10rpx);
				display: block;
				content: ' ';
				width: 6rpx;
				height: 20rpx;
				background: #4174fd;
				border-radius: 4rpx;
			}
		}

		.action-title {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			// height: 88rpx;
			margin-bottom: 20rpx;
			.right{
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
			.tabC{
				display: flex;
				margin-bottom: 20rpx;
				.active{
						background-color: #4174fd ;
						color: #fff;

					}
				.tab-item{
					transition: .8s;
					
				font-size: 28rpx;
					padding: 12rpx 22rpx;
					border-left:2rpx solid #4174fd ;
						border-top:2rpx solid #4174fd ;
						border-bottom:2rpx solid #4174fd ;
						&:first-of-type{
							border-top-left-radius:16rpx ;
							border-bottom-left-radius:16rpx ;
							
							border-radius:16rpx 0 0  16rpx;

						}
						&:last-of-type{
								border-top-right-radius:16rpx ;
							border-bottom-right-radius:16rpx ;
						border-right:2rpx solid #4174fd ;
						// 	border-radius:0 16rpx  16rpx 0;

						}
					// &:nth-of-type(n+2){
					// 	border-left:2rpx solid #4174fd ;
					// 	border-top:2rpx solid #4174fd ;
					// 	border-bottom:2rpx solid #4174fd ;

					// }
				}
			}
		}

		.white-box {
			width: 100%;
			box-sizing: border-box;
			background: #fff;
			border-radius: 32rpx;
			padding: 32rpx;
			margin-top: 20rpx;
		}

		.gray-title {
			width: calc(100% + 64rpx);
			height: 88rpx;
			margin-left: -32rpx;
			background: rgba(65, 116, 253, 0.08);
			display: flex;

			.gray-title-item {
				flex: 1;
				// display: inline-block;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 26rpx;
				font-weight: 600;
				color: #333333;


			}
		}

		.num-box {
			display: flex;
			justify-content: space-around;

			.num-box-item {
				box-sizing: border-box;
				position: relative;
				height: 140rpx;
				padding: 24rpx 0;

				.num {
					height: 56rpx;
					font-size: 40rpx;
					font-weight: 500;
					text-align: center;
					color: #333333;
					line-height: 56rpx;
				}

				.desc {
					height: 36rpx;
					opacity: 0.7;
					font-size: 26rpx;
					font-weight: 400;
					text-align: center;
					color: #999999;
					line-height: 36rpx;
				}

				&::after {
					display: block;
					content: ' ';
					width: 1rpx;
					height: 48rpx;
					background: #e5e5e5;
					border-radius: 2rpx;
					position: absolute;
					top: calc(50% - 12rpx);
					right: 0;

				}

				&:last-child,
				&.no-border {
					&::after {
						display: none;
					}
				}
			}
		}

		.grade-all {
			.num-box-item {
				width: 214rpx;
			}
		}

		.grade-course {
			.num-box-item {
				width: 160rpx;
			}
		}

		.class-all {
			.num-box-item {
				width: 160rpx;
			}
		}

		.class-course-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.course-name {
				.name {
					height: 50rpx;
					font-size: 36rpx;
					font-weight: 600;
					color: #333333;
					line-height: 50rpx;
					margin-bottom: 8rpx;
				}

			}
		}

		.class-course {
			flex-wrap: wrap;

			.average {
				width: 100%;
				flex: 2 0 100%;
				text-align: center;
				margin-bottom: 30rpx;



			}



			.num-box-item {
				width: 160rpx;
			}
		}

		.desc {
			height: 36rpx;
			opacity: 0.7;
			font-size: 26rpx;
			font-weight: 400;
			text-align: center;
			color: #999999;
			line-height: 36rpx;
		}
	}

	.red-num {
		height: 90rpx;
		font-size: 64rpx;
		font-weight: 600;
		color: #fe4f54;
		line-height: 90rpx;
	}

	.red-desc {
		font-size: 26rpx;
		font-weight: 600;
		color: #fe4f54;
	}

	.num-list {
		margin-top: 40rpx;
	}

	.rank-list {
		width: calc(100% + 48rpx);
		margin-left: -24rpx;


		.rank-list-item {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.rank-list-item-info {
				flex: 1;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				height: 88rpx;
				line-height: 88rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	.no-remark {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 80rpx 0 20rpx;
	}

	.empty-icon {
		width: 360rpx;
		height: 300rpx;
		background: url("@/pages/achievement/static/img/no-remark.jpg") 0 0 no-repeat;
		background-size: 100% 100%;
	}

	.empty-text {
		height: 36rpx;
		line-height: 36rpx;
		font-size: 26rpx;
		color: #999;
		text-align: center;
	}

	.gray-box {
		background: #f2f4fa;
		border-radius: 16rpx;
		padding: 24rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 36rpx;
		margin: 24rpx 0 36rpx 0;
	}

	.info-box-title {
		height: 42rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 16rpx;

		.info-title-icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 16rpx;
		}

		.result {
			background: url("@/pages/achievement/static/img/chengji.jpg") 0 0 no-repeat;
			background-size: 100% 100%;
		}

		.course {
			background: url("@/pages/achievement/static/img/course.jpg") 0 0 no-repeat;
			background-size: 100% 100%;
		}
	}



	.charts-box {
		width: 100%;
		height: 600rpx;
	}

	.text-center {
		text-align: center;
	}

	.w-58 {
		width: 116rpx;
	}

	.w-105 {
		width: 210rpx;
	}

	.w-72 {
		width: 144rpx;
	}

	.w-80 {
		width: 160rpx;
	}

	.w-127 {
		width: 254rpx;
	}

	.w-68 {
		width: 136rpx;
	}

	.w-90 {
		width: 180rpx;
	}

	.w-85 {
		width: 170rpx;
	}

	.x-scroll {
		width: 100%;
		overflow-x: scroll;
	}
</style>
